<template>
    <div class="layout" v-for="item in goodsDataList" :key="item.id">
      <HomePanel :title="item.name" :sub-tittle="item.saleInfo"></HomePanel>
      <div class="home_product">
        <div class="left_image">
          <img v-img-lazy="item.picture"/>
        </div>
        <div class="right_goods">
          <div class="goodsContent">
            <div class="content" v-for="good in item.goods" :key="good.id">
              <GoodItem :goods="good" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref } from 'vue';
  import HomePanel from '../components/HomePanel.vue';
  import { getGoodsAPI } from '@/apis/home';
  import GoodItem from './GoodItem.vue';

  const goodsDataList = ref([]);
  
  const getGoods = async () => {
    const res = await getGoodsAPI();
    goodsDataList.value = res.result;
  };
  
  onMounted(getGoods);
  </script>
  
  <style lang="scss" scoped>
  .layout {
    .home_product {
      display: flex;
      background: white;
      .left_image {     
        width: 400px;
        height: 850px;
        padding-left: 30px;
        img {
          border-radius: 10px;
          width: 100%;
          height: 100%;
        }
      }
  
      .right_goods {
        padding: 0 20px;
        .goodsContent {
          padding: 10px 30px;
          margin-left: 80px;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 50px;
          background: #fff;
  
          .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 250px;
            height: 450px;
          }
        }
      }
    }
  }
  </style>